<script setup>
	import $http from '@/utils/http'
	import { ref, reactive, onMounted, defineEmits } from 'vue'
	import { useAppStoreHook } from '@/stores/modules/app'
	import { useUserStoreHook } from '@/stores/modules/user'
	import { useToast } from 'wot-design-uni'
	
	import mailIcon from '@/static/icon/login/mail.png'
	import phoneIcon from '@/static/icon/login/phone.png'
	
	const toast = useToast()
	const useAppStore = useAppStoreHook()
	const useUserStore = useUserStoreHook()
	const enrollForm = ref()
	const checkboxKey = ref(true)
	const enrollFormData = reactive({
	  username: '',
	  password: '',
	  password_sure: '',
	  inviter_code:''
	})
	
	const emit = defineEmits(['success'])
	
	// 请求注册
	const requestEnroll = (data) => {
		return new Promise(async (resolve, reject) => {
			try {
				const res = await $http.request({
					url: `/user/register`,
					method: 'POST',
					data: data,
				})
				resolve(res)
			} catch (e) {
				reject(e)
			}
		})
	}
	 
	// 登录成功后执行
	const successLogin = () => {
	  emit('success')
	}
	
	// 注册按钮
	const enroll = async () => {
		if(!enrollFormData.username || !enrollFormData.password || !enrollFormData.password_sure || !enrollFormData.inviter_code) { return }
		if(enrollFormData.password !== enrollFormData.password_sure) { return }
	  const res =	await requestEnroll(enrollFormData)
		if(res.code !== 200) {
			toast.show({
				position: 'bottom',
				msg: res.msg
			})
			return
		}
		useUserStore.SET_USERINFO(res.data)
		toast.show({
		  position: 'bottom',
		  msg: res.msg
		})
		enrollFormData.username = ''
		enrollFormData.password = ''
		enrollFormData.password_sure = ''
		enrollFormData.inviter_code = ''
		successLogin()
		uni.switchTab({
			url: '/pages/user/user'
		});
	}
	
</script>

<template>
	<view class="enroll-form">
		<view class="form-itme">
			<input class="itme-input" v-model="enrollFormData.username" type="text" placeholder="您的昵称" />
		</view>
		<view class="form-itme">
			<input class="itme-input" v-model="enrollFormData.password" type="password" placeholder="密码" />
		</view>
		<view class="form-itme">
			<input class="itme-input" v-model="enrollFormData.password_sure" type="password" placeholder="确认密码" />
		</view>
		<view class="form-itme">
			<input class="itme-input" v-model="enrollFormData.inviter_code" type="text" placeholder="您的邀请码" />
		</view>
		<view class="enroll-btn-box">
			<wd-button size="large" class="enroll-btn" @click="enroll">注册</wd-button>
		</view>
		
	</view>
	<wd-toast />
</template>

<style scoped lang="scss">

.enroll-form {
	width: 100%;
	box-sizing: border-box;
	
	.form-itme {
		height: 75rpx;
		margin: 10rpx 0;
		border-radius: 5rpx;
		background-color: rgba( 75, 83,102, 0.5);
		
		.itme-input {
			width: 100%;
			height: 100%;
			color: #eeeeee;
			padding: 0 20rpx;
			font-size: 34rpx;
			box-sizing: border-box;
		}
	}
	
	.enroll-btn-box {
		margin: 30rpx 0;
		display: flex;
		justify-content: center;
		.enroll-btn {
			width: 100%;
			border-radius: 45rpx;
		}
	}
}
</style>